<template>
  <div class="m-5 result-success">
    <Result
      status="success"
      title="支付成功"
      :sub-title="`订单号:${mchOrderNo}`"
    >
      <template #extra>
<!--        <a-button key="console" type="primary"> 返回列表 </a-button>
        <a-button key="buy"> 查看项目 </a-button>
        <a-button key="buy"> 打印 </a-button>-->
      </template>
    </Result>

  </div>
</template>
<script lang="ts" setup>
import { Result } from 'ant-design-vue';
import { useRoute } from 'vue-router';
import {reactive, toRefs} from "vue";
// 获取路由器对象
const route = useRoute();
// 获取当前的 query 参数对象
const queryParams = reactive(route.query);

// 现在，queryParams 变成了响应式对象

// 如果需要在模板中使用响应式对象的属性，可以使用 toRefs 方法
const { mchOrderNo } = toRefs(queryParams);

</script>
<style lang="less" scoped>
.result-success {
  padding: 48px 32px;
  background-color: @component-background;

  &__content {
    padding: 24px 40px;
    background-color: @background-color-light;
  }
}
</style>
